<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>按天包车-详情页</title>
		<link rel="stylesheet" href="${ctxStatic }/gov/css/govday.css" />
		<link rel="stylesheet" href="${ctxStatic }/gov/css/gov_total.css" />
		<script type="text/javascript" src="${ctxStatic }/gov/js/jquery-1.8.3.min.js"></script>
		<script src="${ctxStatic}/jquery/jquery.validate.js" type="text/javascript"></script>
		<script type="text/javascript" src="${ctxStatic }/gov/js/gov.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1"></script>
		<script type="text/javascript">
//百度地图API功能
function G(id) {
	return document.getElementById(id);
}
var map = new BMap.Map("l-map");
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
	{"input" : "suggestId"
	,"location" : map
});
ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
var str = "";
	var _value = e.fromitem.value;
	var value = "";
	if (e.fromitem.index > -1) {
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}    
	str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
	value = "";
	if (e.toitem.index > -1) {
		_value = e.toitem.value;
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}    
	str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
	G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
var _value = e.item.value;
	myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
	setPlace();
	// 选中详细地址后，调用百度地图获取 云地理编码 
	var address = encodeURIComponent(myValue);
	$.getJSON(
			"https://api.map.baidu.com/cloudgc/v1?ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1&address="+address+"&callback=?",
			function(data){
			if(data.status == 0 && data.result.length>0 ){
				$('#departcityName').val(data.result[0].address_components.city);
				var $sitename = $('#departcityName').val();
				$.post("${ctxFront}/sms/getSiteId","sitename="+$sitename,function(d){
					if(d!=null&&d!=''){
						$("#siteid").val(d);
					}else{
						$("#siteid").val("");
					}
				});
			}
		});
});
function setPlace(){
	map.clearOverlays();    //清除地图上所有覆盖物
	function myFun(){
		var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
		map.centerAndZoom(pp, 18);
		map.addOverlay(new BMap.Marker(pp));    //添加标注
	}
	var local = new BMap.LocalSearch(map, { //智能搜索
	  onSearchComplete: myFun
	});
	local.search(myValue);
}
</script>
	</head>
        <script>
         $(function(){
         /*表单验证*/
	$('#govdayt').validate({
	       rules:{
	    	   boardaddr:"required",
	    	   purchasenum:"required",
	    	   contacts:"required",
	    	   payertel:{
					required:true,
					isMobile : true
				}
	    },	    
	   messages:{
		   boardaddr: "<i class='verico'></i>请输入上车地点",
		   purchasenum:"<i class='verico'></i>请选择车辆数",
		   contacts:"<i class='verico'></i>请输入联系人",
		   payertel:{
				required:"<i class='verico'></i>请输入手机号码",
				isMobile :"<i class='verico'></i>请输入正确手机号码"
				}
	   },
     
	});		
		/*手机验证*/
	jQuery.validator.addMethod("isMobile", function(value, element) {
	            var length = value.length;
	            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
	            return this.optional(element) || (length == 11 && mobile.test(value));
	        }, "请正确填写您的手机号码");
        	})
        	var days = ${query.daysnum};
        	
	var suitrtnprice = null;
	if(days==0){
		suitrtnprice = ${tRentproduct.suitrtnprice};
	}else{
		suitrtnprice = ${query.daysnum*tRentproduct.suitrtnprice};
	}
        $(function(){
		$('#purchasenum').on('change',function(){
			
			var integer = /^[0-9]*[1-9][0-9]*$/;
			var val = $(this).val();
			if(val!='' && !integer.test(val)) {
				$(this).focus();
				$('#suitrtnprice').text("￥车辆数不正确！");
			} else {
				var totalprice = accMul(val,suitrtnprice);
				$('#suitrtnprice').text("￥"+totalprice.toFixed(0));
			}
		});
		$('#purchasenum').trigger('change');
	}); 
	function accMul(arg1, arg2) {
		var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
		try {
			m += s1.split(".")[1].length;
		} catch (e) {
		}
		try {
			m += s2.split(".")[1].length;
		} catch (e) {
		}
		return Number(s1.replace(".", "")) * Number(s2.replace(".", ""))
				/ Math.pow(10, m);
	}
        </script>
	<body>
		<%@include file="../index/head.jsp" %>
		<div id="govday">
			<div class="govday-main">
				<form id="govdayt" action="${ctxGov}/submitDayRentOrder" method="post">
				<input type="hidden" name="ordertype" value="2" />
				<input type="hidden" name="bookingdays" id="bookday" value="${query.daysnum }" />
				<input type="hidden" name="realscheid" value="${query.rentid }" />
				<input type="hidden" name="totalPrice" value="" id="totalPrice" />
				<input type="hidden" name="office.id" value="${tRentproduct.office.id }" id="officeid" />
				<input type="hidden" name="cargotypeid" value="${tRentproduct.cargotype.cargotypeid }" id="cargotypeid" />
				<input type="hidden" name="office.name" value="${rentgroup.office.name }" />
				<input type="hidden" name="office.iswifi" value="${query.office.iswifi }" />
				<input type="hidden" name="office.powersupply" value="${query.office.powersupply }" />
				<input type="hidden" name="office.tablewater" value="${query.office.tablewater }" />
				<input type="hidden" name="office.businesssuit" value="${query.office.businesssuit }" />
				<input type="hidden" name="office.paper" value="${query.office.paper }" />
				<input type="hidden" name="fromdateStr" value="${times}" />
				<input type="hidden" name="departcity.sitename" value="${tRentproduct.departcity.sitename }" />
				<input type="hidden" name="departcity.siteid" value="${tRentproduct.departcity.siteid}" />
				<input type="hidden" name="money" value="${tRentproduct.suitrtnprice}" id="cost_dc" />
				<div class="govtotal-box">
					<div class="govtotal-top">
						<div class="govtotal-t-abside">
							<div class="govtotal-ta-tit">
								<h5>详情信息</h5>
							</div>
							<c:choose>
				<c:when test="${rentgroup.range eq '2'}" >
					<c:set var="destcityPart" value="跨市"/>
				</c:when>
				<c:otherwise><c:set var="destcityPart" value="市内"/></c:otherwise>
			</c:choose>
			<c:if test="${query.daysnum==0 }">
			<c:set var="genOrdername" value="${tRentproduct.departcity.sitename}${destcityPart}0.5日按天包车"/>
			</c:if>	
			<c:if test="${query.daysnum!=0 }">
			<c:set var="genOrdername" value="${tRentproduct.departcity.sitename}${destcityPart}${query.daysnum }日按天包车"/>
			</c:if>	
							<div class="govtotal-ta-box">
								<div class="g-tabox-img">
									<img src="../${images}" />
									<p>${tRentproduct.cargotype.typename }</p>
								</div>
								<div class="g-tabox-exe">
									<ul class="g-tabox-list">
										<li>
											<span class="tabox-il-tit">产品名称：</span>
											<span class="tabox-il-txt">${genOrdername }</span>
										</li>
										<input type="hidden" name="ordername" value="${genOrdername}" />
										<li>
											<span class="tabox-il-tit">用车时间：</span>
											<span class="tabox-il-txt"><fmt:formatDate value="${query.fromdate}" pattern="yyyy年MM月dd日 hh:mm"/></span>
										</li>
										<li>
											<span class="tabox-il-tit">包车天数：</span>
											<span class="tabox-il-txt">
											<c:if test="${query.daysnum==0 }">0.5天</c:if>	
				  	   	   	      	  	    	 <c:if test="${query.daysnum!=0 }">${query.daysnum }天</c:if>	
											</span>
										</li>
										<li>
											<span class="tabox-il-tit">服务车队：</span>
											<span class="tabox-il-txt">${tRentproduct.office.abbr }</span>
										</li>
										<li>
											<span class="tabox-il-tit">特色服务：</span>
											<span class="tabox-il-txt">
												<c:if test="${query.office.iswifi == '1' }">无线wifi</c:if>
												<c:if test="${query.office.powersupply == '1' }">车载充电</c:if>
												<c:if test="${query.office.tablewater == '1' }">免费饮用水</c:if>
												<c:if test="${query.office.businesssuit == '1' }">商务正装</c:if>
												<c:if test="${query.office.paper == '1' }">免费纸巾</c:if>			
											</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="govtatal-t-right">
							<div class="govtatal_cost">
								<i class="cost_icon"></i>
								<h5>费用明细：</h5>
							</div>
							<c:if test="${rentgroup.range eq '2'}" >
							<p class="cost-txt">费用包含：【套餐价8小时300公里/天】司机代驾服务费、车辆使用费、车辆油电费、空驶费、夜间服务费、司机小费。</p>
							</c:if>
							<c:if test="${rentgroup.range eq '1'}" >
							<c:if test="${query.daysnum eq 0}">
							<p class="cost-txt">费用包含：【套餐价4小时50公里/天】司机代驾服务费、车辆使用费、车辆油电费、空驶费、夜间服务费、司机小费。</p>
							</c:if>
							<c:if test="${query.daysnum ne 0}">
							<p class="cost-txt">费用包含：【套餐价8小时100公里/天】司机代驾服务费、车辆使用费、车辆油电费、空驶费、夜间服务费、司机小费。</p>
							</c:if>
							</c:if>
							<p>
								<span>价格：￥
								<font id="totalcostd">
								<c:if test="${query.daysnum eq 0}">
								<c:set var="totalPrice" value="${tRentproduct.suitrtnprice }"/>${totalPrice}
								</c:if>
								<c:if test="${query.daysnum ne 0}">
								<c:set var="totalPrice" value="${query.daysnum*tRentproduct.suitrtnprice }"/>${totalPrice}
								</c:if>
								</font>
								</span>
								<input class="btnyd" type="submit" id="costbtn" value="预定" style="float: right;margin-right: 80px;">
							</p>
						</div>
					</div>
					<div class="govtotal-body">
						<div class="govtotal-b-left">
							<div class="gov-list-fill">
								<div class="fill-list-title">
									<h5>填写信息</h5>
								</div>
								<ul class="g-fill-list">
									<li class="fill-list-il">
										<lable><span>上车地点：</span><input type="text"  id="suggestId" name="boardaddr" placeholder="第一天上车地点" class="custom-dress"/>
										<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div></lable>
										
									</li>
									<li class="fill-list-il">
										<lable>
											<span>行程备注：</span>
											<textarea placeholder="请填写每日详细行程（途径城市、景点等）" id="remark" name="remarks"></textarea>
										</lable>
									</li>
									<li class="fill-list-il">
										<lable><span>车辆数：</span><input type="number" id="purchasenum" name="purchasenum" min="1" max="10" value="${not empty orders.purchasenum?orders.purchasenum:'1' }" /></lable>
									</li>
									<li class="fill-list-il">
										<lable><span>联系人：</span><input type="text" placeholder="联系人姓名" id="govd-name"  name="contacts"/></lable>
									</li>
									<li class="fill-list-il">
										<lable><span>联系电话：</span><input type="text" placeholder="输入手机号" id="govd-iphone" name="payertel" value="${tel}"/></lable>
									</li>
								</ul>
							</div>
							<div class="fill-notice">
									<h5>重要提示：</h5>
									<p>
										1.如您的预订时间距离发车时间在12小时以内，为保证您的顺利出行，请保持您的电话畅通。
									</p>
									<p>
										2.司机食宿费一般由订车人安排，如不能安排，由司机向订车人收取相应的食宿补贴，标准为：住宿200元/晚、三餐80元/天。
									</p>
									<p>
										3.不含费用收费标准: </br>
										(1)超时长费：当日用车总时长超过<c:if test="${query.daysnum eq 0}">4</c:if><c:if test="${query.daysnum ne 0}">8</c:if>小时后，订车人主动要求增加用车时长，将按相应标准收取超时长费。标准：${tRentproduct.cargotype.typename }：${tRentproduct.outtimefee }元/小时。</br>
										(2)超公里费：当日用车总里程超过<c:if test="${rentgroup.range eq '2'}" >300</c:if><c:if test="${rentgroup.range eq '1'}" ><c:if test="${query.daysnum eq 0}">50</c:if><c:if test="${query.daysnum ne 0}">100</c:if></c:if>公里后，订车人主动要求增加用车里程，将按相应标准收取超公里费。标准：${tRentproduct.cargotype.typename }：${tRentproduct.outkmsfee }元/公里。</br>
										(3)因第三方收取的停车费、路桥费、摆渡费等由订车人现场自付，发票可自行保留。
									</p>
									<p>
										4.如产生不含费用项请在服务结束后，将钱面付司机。严禁司机额外乱收费，如发现可联系霞客约车客服核实退还。
									</p>
									<p>
										5.开具发票:如需发票，由霞客约车根据订单金额统一开具。请在服务完成后至我的账户—关于发票—立即开票填写开票信息，开票总金额为订单费用。
									</p>
							</div>
						</div>
						<div class="govtotal-b-abside">
							<div class="g-b-cancel">
								<i class="cancel_icon"></i>
								<h5>取消须知：</h5>
							</div>
							<div class="cancel-txts">
								<p>
									●该产品支持取消。</br> 
									●出行日期前72小时前取消，免收违约金；</br> 
									●出行日期前72小时至24小时取消，收取费用总额30%的违约金；</br>  
									●出行开始前24小时取消，收取费用总额50%的违约金；</br>  
									●超过发车时间不可退款。</br> 
									●如需改期，请申请取消后重新预订。
								</p>
							</div>
						</div>
					</div>
				</div>
			    </form>
			</div>
		</div>
		 <%@include file="../index/foot.jsp" %>
	</body>
<script type="text/javascript">
$(function(){	
	$('#purchasenum').change(function(){
		var daynum=$('#bookday').val();
		var costnum=$('#cost_dc').val();
		var totalcost=$('#totalPrice').val();
		var carsnum=$('#purchasenum').val();
		if(daynum == 0){
			totalcost=carsnum*costnum;
		}else{
			totalcost=daynum*carsnum*costnum;
		}
		$('#totalcostd').text(totalcost.toFixed(0))

	})
	
	
	
})
</script>

</html>